<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>绑定样式</title>
        <style type="text/css">
            #root>div { margin: 15px auto ; border: 1px solid blue ; user-select: none; }
            .active { background: #dfdfdf; }
            .even { color: #f00 ;}
        </style>
    </head>
    <body>

        <h3>绑定样式</h3>

        <div id="root">
            <div :class="{ 'active' : isActive }" @click="toggle">对象语法</div>
            <div :class="['active','even']">数组语法</div>
            <div :class="[ first , second ]">数组语法</div>
            <div :class="[ isActive ? first : '' , second ]">数组语法</div>
            <div :class="classArray">数组语法</div>
            <div :class="[ { 'active' : isActive } , second ]">数组语法 + 对象语法</div>
            <div :class="[ { [first] : isActive } , second ]">数组语法 + 对象语法</div>
            <div>
                <p>
                    前景色: 
                    <input type="radio" v-model="frontColor" value="red">红色
                    <input type="radio" v-model="frontColor" value="blue">蓝色
                    <input type="radio" v-model="frontColor" value="green">绿色
                </p>
                <p>
                    背景色: 
                    <input type="radio" v-model="backColor" value="#dfdfdf">#dfdfdf
                    <input type="radio" v-model="backColor" value="#9696ff">#9696ff
                    <input type="radio" v-model="backColor" value="#ffff00">#ffff00
                </p>
                <p>
                    文字尺寸:
                    <select v-model="size">
                        <option value="14">14px</option>
                        <option value="20">20px</option>
                        <option value="30">30px</option>
                    </select>
                </p>
                <p :style="{ 'color': frontColor , 'background-color': backColor , 'font-size': fontSize }">
                    通过绑定内联样式来设置元素样式 (对象语法)
                </p>
                <p :style="styles">
                    通过绑定内联样式来设置元素样式
                </p>
            </div>
        </div>

        <script src="vue.global.js"></script>

        <script>
            const app = Vue.createApp({
                data(){
                    return {
                        isActive: true ,
                        first: 'active',
                        second: 'even' ,
                        classArray: [ 'active' , 'even' ],
                        frontColor: 'red' ,
                        backColor: '#9696ff' ,
                        size: 14 ,
                        styles: {
                            color: 'green' , 
                            backgroundColor: '#f0f0f0' , 
                            fontSize: '20px'
                        }
                    }
                },
                methods: {
                    toggle(){
                        this.isActive = !this.isActive ;
                    }
                },
                computed: {
                    fontSize(){
                        return this.size + 'px';
                    }
                }
            });
            app.mount('#root');

            let x = Object.create(null);
            let name = 'id';
            // 通过 属性表达式 为 对象添加 属性
            x[ name ] = 123 ;
            console.log( x );
        </script>
        
    </body>
</html>